<template>
	<!-- 轮播 -->
	<view class="banner-swiper-box mb20" v-if="detail.list">
		<swiper class="banner-carousel" skip-hidden-item-layout circular @change="swiperChange" :autoplay="true">
			<swiper-item v-for="(item, index) in detail.list" :key="index" class="carousel-item " @tap="routerTo(item.path)">
				<image class="swiper-image " :src="item.image" mode="widthFix" lazy-load></image>
			</swiper-item>
		</swiper>
		<view class="banner-swiper-dots x-f">
			<view class="dot-cur dot-wrap">{{ swiperCurrent + 1 }}</view>
			<view class="dot-break dot-wrap">/</view>
			<view class="dot-total dot-wrap">{{ detail.list.length }}</view>
		</view>
	</view>
</template>

<script>
/**
 * 自定义之轮播卡片
 * @property {Object} detail - 轮播信息
 */
export default {
	components: {},
	data() {
		return {
			swiperCurrent: 0, //轮播下标
			webviewId: 0,
			routerTo: this.$tools.routerTo
		};
	},
	props: {
		detail: {
			type: Object,
			default: null
		},
		bgImage: {
			tye: Boolean,
			default: true
		}
	},
	computed: {},
	created() {},
	methods: {
		// 轮播切换
		swiperChange(e) {
			this.swiperCurrent = e.detail.current;
		},
		// 路由跳转
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		}
	}
};
</script>

<style lang="scss" scoped>
// 轮播
.banner-swiper-box {
	width: 750rpx;
	height: 280rpx;
	padding: 0 20rpx;
	position: relative;
}
.bg-none {
	background: none;
}

.banner-carousel {
	width: 710rpx;
	height: 280rpx;
	position: relative;
	border-radius: 20rpx;
	overflow: hidden;

	.carousel-item {
		width: 100%;
		height: 100%;
		overflow: hidden;
		border-radius: 20rpx;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
		background-color: #ccc;
	}
}

.banner-swiper-dots {
	display: flex;
	position: absolute;
	right: 40rpx;
	bottom: 26rpx;
	z-index: 66;
	background-color: rgba(#000, 0.3);
	padding: 0 14rpx;
	border-radius: 30rpx;
	line-height: 30rpx;
	.dot-wrap {
		font-size: 20rpx;
		font-weight: 500;
		color: #ffffff;
		margin: 0 2rpx;
	}
}
</style>
